<template>
  <a-tooltip>
    <template slot="title">
      <span :if="iconTitle!==undefined" >
        {{ iconTitle }}
      </span>
    </template>
    <svg class="my-icon" :class="iconClass" :style="iconStyle" aria-hidden="true">
      <use :xlink:href="iconName"></use>
    </svg>
    <span :if="iconText!==''" style="margin-left: 8px;">
      {{ iconText }}
    </span>
  </a-tooltip>
</template>

<script>
export default {
  name: 'MyIcon',
  props: {
    // 图标提示文字
    iconTitle: {
      type: String,
      default: undefined
    },
    // 图标后的文字
    iconText: {
      type: String,
      default: ''
    },
    // 图标类型 例如status、valve、notice等
    iconType: {
      type: String,
      required: true
    },
    // 图标莫类型的具体值
    iconValue: {
      type: [String, Number],
      default: 1
    },
    // 图标莫类型的具体值 default small large tiny
    iconSize: {
      type: String,
      default: 'default'
    },
    // style
    iconStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconType}_${this.iconValue}`
    },
    iconClass () {
      return `my-icon-${this.iconSize}`
    }
  }
}
</script>

<style>
  .my-icon{
    fill: currentColor;
    overflow: hidden;
  }
  .my-icon-default {
    width: 24px;
    height: 24px;
    vertical-align: -8px;
  }
  .my-icon-small {
    width: 18px;
    height: 18px;
    vertical-align: -4px;
  }
  .my-icon-large {
    width: 30px;
    height: 30px;
    vertical-align: -10px;
  }
  .my-icon-tiny {
    width: 1em;
    height: 1em;
    vertical-align: -3px;
  }
</style>
